<template>
  <Echarts
    id="echarts"
    height="300px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [
    { value: 26, name: "家用电器" },
    { value: 27, name: "户外运动" },
    { value: 24, name: "汽车用品" },
    { value: 23, name: "手机数码" },
  ];
  const testDimensions = ["name", "value"];
  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        // series的类型，如'line'、'bar'、'pie'、'scatter'等

        type: "line", //line表示折线图   bar表示柱状图   pie表示饼图   scatter表示散点图

        // series的名称，用于tooltip的显示，legend的图例筛选等
        name: "数据系列1",

        // series的数据，可以是数组，也可以是函数，详见下面的data配置项
        data: [120, 250, 150, 80, 70, 110, 130],

        // series的样式配置，如颜色、线条粗细、图形类型等
        itemStyle: {
          color: "#ff4c4c", // 线条颜色
          borderWidth: 2, // 线条粗细
          borderType: "solid", // 线条类型
          borderColor: "#fff", // 线条颜色
          lineStyle: {
            type: "solid", // 线条类型
            width: 2, // 线条粗细
            color: "#ff4c4c", // 线条颜色
          },
          areaStyle: {
            color: "#ff4c4c", // 填充颜色
          },
          symbol: "circle", // 点的形状
          symbolSize: 10, // 点的大小
        },

        // series的标签配置，如显示文本、文本位置、文本样式等
        label: {
          show: true, // 是否显示标签
          position: "top", // 标签位置，如'top'、'bottom'、'left'、'right'等
          formatter: "{c}", // 标签文本格式化字符串，支持'{a}'、'{b}'、'{c}'等变量
          color: "#666", // 标签颜色
          fontWeight: "bold", // 标签字体粗细
          fontFamily: "Arial", // 标签字体
          fontSize: 16, // 标签字号
        },

        // series的标记配置，如显示点、点的样式、点的大小等
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            { type: "min", name: "最小值" },
          ],
          symbol: "triangle", // 点的形状
          symbolSize: 20, // 点的大小
          label: {
            show: true, // 是否显示标签
            color: "#666", // 标签颜色
            fontWeight: "bold", // 标签字体粗细
            fontFamily: "Arial", // 标签字体
            fontSize: 16, // 标签字号
          },
        },

        // series的动画配置，如动画类型、动画时长、动画延迟等
        animation: {
          type: "scale", // 动画类型，如'scale'、'fadeIn'、'explode'等
          duration: 1000, // 动画时长，单位为ms
          delay: 0, // 动画延迟，单位为ms
          easing: "cubicOut", // 动画缓动函数，如'linear'、'easeIn'、'cubicOut'等
        },

        // series的其他配置，如是否开启平滑曲线、是否开启渐变色等
        smooth: false, // 是否开启平滑曲线
        gradient: {
          // 是否开启渐变色
          type: "radial", // 渐变类型，如'linear'、'radial'等
          colorStops: [
            { offset: 0, color: "#ff4c4c" },
            { offset: 1, color: "#fff" },
          ], // 渐变颜色
          global: false, // 是否全局开启渐变色
        },
      },
    ],
  };
});
</script>